<template>
<div>
  <a-drawer
    :title="title"
    :maskClosable="true"
    width="500"
    placement="right"
    :closable="true"
    @close="close"
    :visible="visible"
    style="overflow: auto; padding-bottom: 53px"
  >
    <a-descriptions :title="item.title" :column="1" v-for="(item, index) in fieldArr" :key="index">
      <a-descriptions-item v-for="(obj, i) in item.arr" :key="i">
        <template slot="label">
          {{obj.label}}
          <!--机构/部门-->
          <a-tooltip placement="leftTop" v-if="obj.field==='orgDeptCname'">
            <template slot="title">
              <span>只有配置“指派部门”时，此处才有显示</span>
            </template>
            <a-icon type="question-circle" style="vertical-align: middle;color: #666;" />
          </a-tooltip>
          <!--定位依据-->
          <a-tooltip placement="leftTop" v-if="obj.field==='positioningBasis'">
            <template slot="title">
              <span>针对最新位置查到的位置结果显示</span>
            </template>
            <a-icon type="question-circle" style="vertical-align: middle;color: #666;" />
          </a-tooltip>
          <!--策略编码-->
          <a-tooltip placement="leftTop" v-if="obj.field==='ployCode'">
            <template slot="title">
              <span>指在预警策略中所配置的编码</span>
            </template>
            <a-icon type="question-circle" style="vertical-align: middle;color: #666;" />
          </a-tooltip>
        </template>
        <!--//涉诈网站截图-->
        <template v-if="datas[obj.field] && obj.field==='siteScreenshotUrl'">
          <img @click="seeImages(datas[obj.field])" :src="`${datas[obj.field]}`" title="点击查看大图" style="max-width:200px;max-height: 130px;cursor: pointer;" />
        </template>
        <!--处置方式-->
        <template v-else-if="datas[obj.field] && obj.field==='disposalMethod'">
          {{filterMultiDictText('disposal_pattern', datas[obj.field])}}
        </template>
        <!--//劝阻内容-->
        <template v-else-if="datas[obj.field] && obj.field==='feedbackResultContent'">
          <a-tag v-for="(item, index) in datas[obj.field].split(',')" :key="index">
            {{item}}
          </a-tag>
        </template>
        <!--数据来源-->
        <template v-else-if="datas[obj.field] && obj.field==='sourceFrom'">
          {{filterMultiDictText('dataSource', datas[obj.field])}}
        </template>
        <!--//通话时长-->
        <template v-else-if="datas[obj.field] && obj.field==='durationCalls'">
          {{datas[obj.field]+' min'}}
        </template>
        <!--//交易金额-->
        <template v-else-if="datas[obj.field] && obj.field==='tradeAmount'">
          {{datas[obj.field]+'/ 元'}}
        </template>
        <!--//最新位置-->
        <template v-else-if="datas[obj.field] && obj.field==='latestLocation'">
          <a @click="gotoMap(datas)" title="点击跳转至预警地图"> {{datas[obj.field]}} </a>
        </template>
        <template v-else-if="datas[obj.field]">
          {{datas[obj.field]}}
        </template>
        <template v-else> 无 </template>
      </a-descriptions-item>
    </a-descriptions>
  </a-drawer>
  <j-modal
    :width="1000"
    :visible="visibleModal"
    switchFullscreen
    @ok="handleCancel"
    @cancel="handleCancel"
    cancelText="关闭">
    <img :src="siteScreenshotUrl" alt="" style="max-width:100%;text-align: center;">
  </j-modal>
</div>
</template>

<script>
import {getDictItemsFromCache} from '@/api/api'
import { warningDetail, getWebsiteScreenshotBy,queryByWaringBaseId } from '@/api/warning/WarningData.js'

export default {
  name: 'DetailsModal',
  data() {
    return {
      status:null,
      title: '操作',
      websiteScreen: null,
      visible: false,
      visibleModal: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      domianURL: window._CONFIG['domianURL'],
      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {},
      disableSubmit: true,
      siteScreenshotUrl: null,
      fieldArr: [
        {
          title: '网站内容信息',
          arr: [
            { field: 'accessDomainName', label: '涉诈网站' },
            { field: 'accessNumber', label: '操作次数' },
            { field: 'responseCode', label: '响应码' },
            { field: 'siteTitle', label: '涉诈网站标题' },
            { field: 'siteScreenshotUrl', label: '涉诈网站截图' },
            { field: 'screenshotTime', label: '截图时间' },
          ],
        },
        {
          title: '受害人反馈信息',
          arr: [
            { field: 'disposalMethod', label: '处置方式' },
            { field: 'dissuadeUser', label: '劝阻账号' },
            { field: 'flagVeriry', label: '反馈验证' },
            { field: 'feedbackTime', label: '反馈处理时间' },
            { field: 'feedbackResultContent', label: '劝阻内容' },
          ],
        },
        {
          title: '受害人基本信息',
          arr: [
            { field: 'victimName', label: '受害姓名' },
            { field: 'batchNumber', label: '批次号' },
            { field: 'victimIdCard', label: '受害人身份证号' },
            { field: 'victimBankAccount', label: '受害人银行账户' },
            { field: 'victimAlipayAccount', label: '受害人支付宝账号' },
            { field: 'victimWechatAccount', label: '受害人微信账号' },
            { field: 'victimQqNumber', label: '受害人QQ号' },
            { field: 'victimIp', label: '受害人IP' },
            { field: 'belongProv', label: '归属省份' },
            { field: 'belongCity', label: '归属城市' },
            { field: 'prov', label: '省级' },
            { field: 'city', label: '地级' },
            { field: 'district', label: '县级' },
            { field: 'township', label: '乡级' },
            { field: 'village', label: '村级' },
            { field: 'orgDeptCname', label: '机构/部门' },
            { field: 'positioningBasis', label: '定位依据' },
            { field: 'latestLocation', label: '最新位置' },
            { field: 'latestLocationTime', label: '最新位置时间' },
            { field: 'locationRefreshName', label: '位置刷新操作人' },
            { field: 'sourceFrom', label: '数据来源' },
            { field: 'ployCode', label: '策略编码' },
            { field: 'lastConcatTime', label: '最近联系时间' },
            { field: 'releaseTime', label: '下发时间' },
            { field: 'belongBank', label: '归属地运营商' },
            { field: 'numberCalls', label: '通话次数' },
            { field: 'durationCalls', label: '通话时长' },
            { field: 'tradeTime', label: '交易时间' },
            { field: 'tradeAmount', label: '交易金额' },
            { field: 'tradeLocation', label: '交易发生地' },
            { field: 'tradeResult', label: '交易结果' },
            { field: 'suspectsCname', label: '嫌疑人姓名' },
            { field: 'suspectsIdNumber', label: '嫌疑人身份证号' },
            { field: 'suspectsPhoneNumber', label: '嫌疑人电话号码' },
            { field: 'suspectsBankAccount', label: '嫌疑人银行账号' },
            { field: 'suspectsAlipayAccount', label: '嫌疑人支付宝账号' },
            { field: 'suspectsWechatAccount', label: '嫌疑人微信账号' },
            { field: 'suspectsQqNumber', label: '嫌疑人QQ号' },
            { field: 'createTime', label: '创建时间' },
          ],
        },
        {
          title: '数据接收信息',
          arr: [
            { field: 'receiverCname', label: '接收人' },
            { field: 'receiveStatus', label: '接收状态' },
            { field: 'receivingTime', label: '接收时间' },
            { field: 'historyReceiver', label: '历史接收' },
          ],
        },
        {
          title: '数据锁定信息',
          arr: [
            { field: 'lockOperatorName', label: '用锁对象' },
            { field: 'useLockWay', label: '用锁方式' },
            { field: 'lockForUserName', label: '被锁对象' },
          ],
        },
        {
          title: '移交详情',
          arr: [
            { field: 'turnOverDate', label: '移交时间' },
            { field: 'officeNameRaise', label: '移交发起单位' },
            { field: 'officeNameTo', label: '移交目标单位' },
            { field: 'turnRemark', label: '移交说明' },
          ],
        },
      ],
      datas: {}
    }
  },
  methods: {
    async handle(record) {
      this.status = record.disposal
      await this.getWarningDetail(record.warningEvtid)
      if(this.status){
        this.getWarningDetail1(record.warningEvtid)
      }
      this.getWebsite(record.websitesId)
      this.visible = true
    },
    // 获取详情信息查询
    getWarningDetail(warningEvtid) {
      warningDetail({warningEvtid: warningEvtid}).then((res) => {
        if (res.success) {
          this.datas = res.result
        } else {
          this.$message.warn(res.message)
        }
      }).catch(e=>{
        this.$message.warn("请求失败！")
      })
    },
    getWarningDetail1(warningEvtid) {
      queryByWaringBaseId({id: warningEvtid}).then((res) => {
        if (res.success) {
          this.datas.turnOverDate = res.result.turnOverDate
          this.datas.officeNameRaise = res.result.officeNameRaise
          this.datas.officeNameTo = res.result.officeNameTo
          this.datas.turnRemark = res.result.turnRemark
        } else {
          this.$message.warn(res.message)
        }
      }).catch(e=>{
        this.$message.warn("请求失败！")
      })
    },
    // 获取涉诈网站截图
    getWebsite(websitesId) {
      getWebsiteScreenshotBy({websitesId: websitesId}).then((res) => {
        if (res.success && res.result) {
          this.$set(this.datas, 'siteScreenshotUrl', res.result)
        }
      }).catch(e=>{
        this.$message.warn("请求失败！");
      })
    },
    //最新位置跳转地图
    gotoMap(records){
      console.log(records)
      this.$router.push({
        path:'/earlyWarning/map',
        query:{
          records:records
        }
      })
    },
    seeImages(siteScreenshotUrl) {
      this.siteScreenshotUrl = siteScreenshotUrl
      this.visibleModal = true
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleCancel() {
      this.close()
    },
    handleCancel() {
      this.visibleModal = false
    },
    filterDictText(dictCode, text) {
      return this.$filterDictTextByCache(dictCode, text)
    },
    filterMultiDictText(dictCode, text) {
      if(!text) return
      let datas = getDictItemsFromCache(dictCode)
      // return this.$filterMultiDictText(datas, text)
      return this.$filterDictText(datas, text)
    },
  }
}
</script>

<style lang="less" scoped>
/deep/.ant-descriptions-title {
  background-color: #eee;
  font-weight: normal;
  padding: 10px 10px;
}
</style>